<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>特色产品订单管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!--    搜索框-->
    <div class="ok-box-center-right">
      <el-form :inline="true" :model="ok_page" class="user-search">
        <el-form-item label="搜索：">
          <el-input size="small" v-model="ok_page.key" placeholder="请输入产品名字"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table size="small" :data="pagesData.list" highlight-current-row border element-loading-text="拼命加载中" style="width: 100%;">
        <el-table-column prop="productTitle" label="商品名称" >
        </el-table-column>
        <el-table-column prop="contacts" label="订购人" >
          <template slot-scope="scope">
            {{scope.row.contacts}}
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="联系电话" align="center">
        </el-table-column>
        <el-table-column prop="buyNumber" label="数量" align="center">
          <template slot-scope="scope">
            {{scope.row.buyNumber}}{{scope.row.unit}}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.status===0">
              <el-tag type="warning" size="small">未处理</el-tag>
            </div>
            <div v-else>
              <el-tag type="success" size="small">已处理</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" min-width="160">
          <template slot-scope="scope">
            <div class="ok-box-center">
              <el-button type="success" size="mini" @click="view(scope.row)">查看</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="line-20"></div>
    <!--    分页-->
    <div class="block">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="pagesData.current"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="pagesData.pageSize"
          layout="sizes, prev, pager, next"
          :total="pagesData.total">
      </el-pagination>
    </div>

    <div>
      <el-drawer
          title="订单详情"
          :visible.sync="viewVisible">
        <div class="ok-box-left" v-if="viewVisible">
          <el-form :model="info" label-width="100px" class="demo-ruleForm">
            <el-form-item label="产品名称:">
              {{info.productTitle}}
            </el-form-item>
            <el-form-item label="价格:">
              {{info.price}}
            </el-form-item>
            <el-form-item label="数量:">
              {{info.buyNumber}}{{info.unit}}
            </el-form-item>
            <el-form-item label="订购人:">
              {{info.contacts}}
            </el-form-item>
            <el-form-item label="联系电话:">
              {{info.phone}}
            </el-form-item>
            <el-form-item label="状态:">
              <span v-if="info.status==0"><el-tag size="medium" type="warning">未处理</el-tag></span>
              <span v-else><el-tag size="medium" type="success">已处理</el-tag></span>
            </el-form-item>
            <el-form-item label="描述:" >
              {{info.intro}}
            </el-form-item>
            <el-form-item label="订购时间:" >
              {{ok.date.formatDateTime(info.createTime)}}
            </el-form-item>
            <el-form-item label="" >
              <div class="ok-box-center">
                <el-button type="primary" @click="handleProductOrder(info.id)" size="medium">处理</el-button>
              </div>
            </el-form-item>
          </el-form>

        </div>
      </el-drawer>
    </div>

  </div>
</template>
<script>
import api from "@/api/manage"
import ok from "@/assets/ok";
import Cookies from "js-cookie";
export default {
  computed: {
    ok() {
      return ok
    }
  },
  data(){
    return{
      title:"编辑",
      viewVisible:false,
      loading: false,
      ok_page:{
        key:"",
        pageSize:8,
        current:0
      },
      pagesData:{
        list:[],
        pageSize:0,
        current:0,
        total:0
      },
      data:{},
      info:{},
    }
  },
  mounted() {
    this.getPage();
    this.checkLogin();
  },
  methods:{
    checkLogin(){
      if (!ok.tool.getStatus()){
        this.$router.push("/views/manage/login/loginHome")
      }
    },
    handleProductOrder(id){
      this.$confirm('确定已经处理过订单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        api.handleProductOrder({id:id}).then(res =>{
          this.$message({
            message:"操作成功!",
            type:"success"
          });
          this.getPage();
          this.viewVisible=false;
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    getPage(){
      api.getMyProductOrderPage(this.ok_page).then(res =>{
        this.pagesData = res.result;
      })
    },
    view(item){
      this.info = item;
      this.viewVisible = true;
    },

    search(){
      this.getPage();
    },
    handleSizeChange(val){
      this.ok_page.pageSize = val;
      this.getPage();
    },
    handleCurrentChange(val){
      this.ok_page.current = val;
      this.getPage()
    },
    closeDialog(){
      this.editFormVisible = false;
      this.formData = this.data
    },
  }
}
</script>
<style>

</style>
